<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
<html>
<head>
    <title>we job</title>
</head>
<body>
<button class="layui-btn layui-btn-primary" id="search"  data-toggle="modal" data-target="#myLargeModalLabel">添加电影场次</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="150">
        <col width="150">
        <col width="150">
        <col width="150">
    </colgroup>
    <thead>
    <tr>
        <th>时间</th>
        <th>票价</th>
        <th>电影</th>
        <th>电影院</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${session}" var="item">
        <tr>
            <td>${item.time}</td>
            <td>${item.price}</td>
            <td>${item.movie_id.name}</td>
            <td>${item.cinema_id.name}</td>
            <td><button class="layui-btn layui-btn-normal" onclick="updateCity(${item.id})">修改</button></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content">
                <input type="hidden" name="id" id="id">
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <select name="movie" required lay-verify="required" id="city" lay-filter="city">
                            <option value="">电影</option>
                            <c:forEach items="${type}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="time" required  lay-verify="required" placeholder="输入时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" required  lay-verify="required" placeholder="输入价格" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabe2">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content">
                <input type="hidden" name="id" id="ids">
                <input type="hidden" name="cinema" id="cinema">
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <select name="movie" required lay-verify="required" id="movie" lay-filter="city">
                            <option value="">电影</option>
                            <c:forEach items="${type}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="time" id="time" required  lay-verify="required" placeholder="输入时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" id="price" required  lay-verify="required" placeholder="输入价格" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-url.min.js"></script>
<script>
    $(function () {
        let id = url('?id');
        console.log(id);
        $("#id").val(id);
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                console.log(data.field)
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/addSession',
                    dataType: "json",
                    async:true,
                    type:'POST',
                    data:data.field,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
            form.on('submit(formDemo1)', function (data) {
                console.log(data.field);
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/updateSession',
                    dataType: "json",
                    async:true,
                    type:'POST',
                    data:data.field,
                    success:function (data) {
                        if(data.status===1) {
                            layer.msg("修改成功",function () {
                                NProgress.done();
                                window.location.reload();
                            });
                        }
                    }
                });
                return false;
            });
        });
    })
    function updateCity(id) {
        //console.log(id);
        $.ajax({
            url:'${pageContext.request.contextPath}/backend/movie/session/'+id,
            dataType: "json",
            async:true,
            type:'POST',
            success:function(data){
                //console.log(data)
                $('#myLargeModalLabe2').modal('show');
                var select = 'dd[lay-value=' +data.data.movie+ ']';
                $('#movie').siblings("div.layui-form-select").find('dl').find(select).click();
                $('#time').val(data.data.time);
                $('#price').val(data.data.price);
                $('#ids').val(data.data.id);
                $('#cinema').val(data.data.cinema);
            }
        })

    }
</script>
</body>
</html>
